<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY gallery - yourGallery</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111220",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a>
    </h1>

    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery</a>
        <span>random-show</span>
    </div>
			<pre class="s-section">				
作者：tiejun@taobao.com(铁军)
功能：随机位置展示
描述：在固定的区域内随机位置、大小展示
源码：<a href="random-region.js">random-region.js</a>，<a href="random-show.js">random-show.js</a></pre>

    <h3 class="s-title">Demo - 功能点</h3>

    <div class="s-section">
        <div class="demo">
            <style>
                .brandshow {
                    width: 750px;
                    height: 200px;
                    border: 1px solid #ccc;
                    position: relative;
                    visibility: hidden;
                }

                .brandshow a {
                    position: absolute;
                    border: 1px solid red;
                    display: block;
                    width: 156px;
                    height: 52px;
                }
            </style>

            <div class="brandshow">

                <a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a
                    href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"> </a>
            </div>
            <script>
                KISSY.use('gallery/random-show/1.0/random-show', function(S, RandomShow) {
                    var rs = new RandomShow('.brandshow');
                    rs.run();
                })
            </script>
        </div>
        <div class="s-demo">
            <!--
            <style>
                .brandshow {
                    width: 750px;
                    height: 200px;
                    border: 1px solid #ccc;
                    position: relative;
                }

                .brandshow a {
                    position: absolute;
                    border: 1px solid red;
                    display: block;
                    width: 156px;
                    height: 52px;
                }
            </style>

            <div class="brandshow">

                    <a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a
                        href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""> </a>
            </div>
            <script>
                KISSY.use('gallery/random-show/1.0/random-show',function(S, RandomShow){
                    var rs = new RandomShow('.brandshow');
                    rs.run();
                })
            </script>
            -->
        </div>
        <a class="s-view-code" href="demo.html#">显示源码</a>
    </div>

    <h3 class="s-title">API</h3>
    <style>
        .class {
            fonts-size: 20px;
            border-bottom: 1px dotted #eee;
            margin: 5px 0;
            line-height: 30px;
        }

        .descname {
            color: #9F2A2A;
            font-weight: 700;
        }

        .s-list {
            margin-left: 20px;
        }
    </style>
    <div class="s-section">

        <h4 class="s-api-title class">CLASS</h4>
        <div><span class="descname">RandomRegion(config)</span> - 在固定区域取若干随机位置、大小区域</div>
        <ul class="s-list">
            <li>
                <h4 class="s-api-title">参数</h4>

                <div class="s-api-params">
                    <ul>
                        <li>config: {<em>Object</em>} &ndash;配置项
                            <ul>
                                <li>width: {<em>Number</em>} &ndash;区域宽度</li>
                                <li>height: {<em>Number</em>} &ndash;区域高度度</li>
                                <li>sizes: {<em>Object|Array</em>} &ndash; 单个区域大小
                                    <p>Object:{baseWidth:(<em>Number</em>),baseHeight:(<em>Number</em>),minRatio:(<em>(Float)</em>)} - 设置基本宽高和最小缩小比例</p>
                                    <p>Array:[{width:<em>Number</em>,height:(<em>Number</em>)},{},...] - 直接设置各个区域的大小</p>
                                </li>
                            </ul>

                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">getRegions ( count ) - 获取区域</div>
        <ul class="s-list">
            <li><h4 class="s-api-title">参数</h4>

                <div class="s-api-params">
                    <ul>
                        <li>count:{Number} - 要取区域的数量</li>
                    </ul>
                </div>
            </li>
            <li>
                <h4 class="s-api-title">返回</h4>

                <div class="s-api-return">{Array}:[regionObj,regionObj,...] - 各个区域对象的数组
                    <p>regionObj:</p>
                    <ul>
                        <li>top: {Number} - 区域上边界位置</li>
                        <li>right:{Number} - 区域右边界位置</li>
                        <li>bottom:{Number} - 区域下边界位置</li>
                        <li>left:{Number} - 区域左边界位置</li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
    <div class="s-section">

        <h4 class="s-api-title class">CLASS</h4>
        <div><span class="descname">RandomShow(container[, config])</span> - 基于RandomRegion,UI层的效果封装</div>
        <ul class="s-list">
            <li>
                <h4 class="s-api-title">参数</h4>

                <div class="s-api-params">
                    <ul>
                        <li>container: {<em>String|HTMLElement</em>} &ndash; 容器</li>
                        <li>config: {<em>Object</em>} &ndash;可选，配置项

                            <ul>
                                <li>width: {<em>Number</em>} &ndash;区域宽度，默认为容器宽度</li>
                                <li>height: {<em>Number</em>} &ndash;区域高度度，默认为容器高度</li>
                                <li>sizes: {<em>Object|Array</em>} &ndash; 单个区域大小，默认为首个子元素大小,最小缩放比例为0.6
                                    <p>Object:{baseWidth:(<em>Number</em>),baseHeight:(<em>Number</em>),minRatio:(<em>(Float)</em>)} - 设置基本宽高和最小缩小比例</p>
                                    <p>Array:[{width:<em>Number</em>,height:(<em>Number</em>)},{},...] - 直接设置各个区域的大小</p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">run ( ) - 执行初始动画</div>
        <div class="s-api-method">stop ( ) - 停止初始动画</div>
    </div>
    <h3 class="s-title">Note</h3>

    <div class="s-section">
        <ul class="s-list">
            <li>随机展示，需要设置合适的单个区域大小，如果查找不到会被隐藏</li>
        </ul>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>